<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Sprite 悬停效果</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            i{
                width:64px;
                height:64px;
                display:block;
                float:left;
                margin-right:50px;
                background:url(x.png);
            }
            .right{
                background-position:0 -64px;
            }
            .home{
                background-position:0 -192px;
            }
            .love{
                background-position:-64px -64px;
            }
            .left{
                background-position:0 -128px;
            }
            .favorite{
                background-position:-64px 0;
            }

            i:hover{
                opacity:0.5;
                border:1px solid white; /* 悬停时会有动的效果 */
            }
            .change:hover{
                background-position:-64px -128px; /* 改变展示的图像 */
            }
        </style>
    </head>
    <body>
        <i class="right change"></i>
        <i class="home"></i>
        <i class="love"></i>
        <i class="left change"></i>
        <i class="favorite change"></i>
    </body>
</html>